import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Modal, Row, Col, Menu, Form, Empty } from 'antd';
import { IPramas } from './type';
import BuildTitle from '@/components/BuildTitle';
import ScrollBarLayout from '@/components/ScrollBarLayout';

import * as ParamsItem from './ParamsFormItem';

import cls from 'classnames';
import './styles.less';
import { ItemType } from 'antd/lib/menu/hooks/useItems';

export const NodeParams: React.FC<IPramas> = ({
  onClose,
  title,
  onFormChange,
  defaultValue,
}) => {
  const [activeKey, setAcitiveKey] = useState<string>('');

  const [form] = Form.useForm();
  const className = 'class' + parseInt(String(Math.random() * 1000000));
  const modalTitle = (
    <BuildTitle title={title ?? '弹窗'} className={className} />
  );

  useEffect(() => {
    if (defaultValue) {
      setAcitiveKey(defaultValue?.funname);

      form.setFieldsValue({
        ...defaultValue?.params,
      });
    }
  }, [defaultValue]);

  const onMenuClick = useCallback((e) => {
    setAcitiveKey(e?.key);
  }, []);

  const onOk = () => {
    let value = {
      funname: activeKey,
      returnvar: form.getFieldValue('returnvalue'),
      params: {
        ...form.getFieldsValue(),
      },
    };

    onFormChange(value);
    onClose();
  };

  /** menu组件菜单  V4.24.8 */
  const menuItems = useMemo(() => {
    let menuList: ItemType[] = [];
    ParamsItem.menuArrays?.forEach((item: any) => {
      menuList?.push({
        key: item?.key,
        label: `${item?.key}（${item?.name}）`,
        title: `${item?.key}（${item?.name}）`,
      });
    });
    return menuList;
  }, [ParamsItem.menuArrays]);

  return (
    <Modal
      open={true}
      onCancel={onClose}
      className={className}
      title={modalTitle}
      width={'50%'}
      bodyStyle={{ padding: '0rem' }}
      onOk={onOk}
    >
      <Row className={cls('params-row')}>
        <Col span={4} className={cls('params-col')}>
          <ScrollBarLayout>
            <Menu
              onClick={onMenuClick}
              selectedKeys={[activeKey]}
              items={menuItems}
            >
              {/* {ParamsItem.menuArrays.map((item) => {
                return (
                  <Menu.Item
                    key={item.key}
                    title={
                      <>
                        {item.key}（{item.name}）
                      </>
                    }
                  >
                    {item.key}（{item.name}）
                  </Menu.Item>
                );
              })} */}
            </Menu>
          </ScrollBarLayout>
        </Col>
        <Col
          span={20}
          style={{ padding: '.75rem' }}
          className={cls('params-col')}
        >
          {activeKey ? (
            <Form
              wrapperCol={{
                span: 18,
              }}
              labelCol={{
                span: 6,
              }}
              style={{
                height: '100%',
              }}
              form={form}
            >
              {activeKey === 'FileExist' &&
                ParamsItem.renderFileExist(activeKey)}

              {activeKey === 'Len' && ParamsItem.renderLen(activeKey)}

              {activeKey === 'Left' && ParamsItem.renderLeft(activeKey)}

              {activeKey === 'Right' && ParamsItem.renderRight(activeKey)}

              {activeKey === 'Mid' && ParamsItem.renderMid(activeKey)}

              {activeKey === 'DeleteFile' &&
                ParamsItem.renderDeleteFile(activeKey)}

              {activeKey === 'Random' && ParamsItem.renderRandom(activeKey)}

              {activeKey === 'FileCopy' && ParamsItem.renderFileCopy(activeKey)}

              {activeKey === 'Split' && ParamsItem.renderSplit(activeKey)}

              {activeKey === 'Replace' && ParamsItem.renderReplace(activeKey)}

              {activeKey === 'UniqueCode' &&
                ParamsItem.renderUniqueCode(activeKey)}

              {activeKey === 'IDCheck' && ParamsItem.renderIDCheck(activeKey)}
            </Form>
          ) : (
            <div
              style={{
                height: '100%',
                width: '100%',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
              }}
            >
              <Empty
                image={Empty.PRESENTED_IMAGE_SIMPLE}
                description="暂无数据"
              />
            </div>
          )}
        </Col>
      </Row>
    </Modal>
  );
};
